<template>
  <el-select size="mini" v-model="data.selectValue" placeholder="请选择搜索类型">
    <el-option
      v-for="item in data.initOption"
      :key="item.value"
      :value="item.value"
      :label="item.label"
    ></el-option>
  </el-select>
</template>

<script>
import { reactive, onMounted } from "@vue/composition-api";
export default {
  props: {
    config: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    const data = reactive({
      option: [
        { value: "name", label: "姓名" },
        { value: "phone", label: "手机号" },
        { value: "email", label: "邮箱" }
      ],
      initOption: [],
      selectValue: ""
    });

    const initOption = () => {
      const optionArr = [];
      props.config.forEach(item => {
        const arr = data.option.filter(elem => elem.value === item)[0]; // filter匹配成功后是一个数组,需要取下标第一个
        optionArr.push(arr);
      });

      data.initOption = optionArr;

      data.selectValue = optionArr[0].value;
    };

    onMounted(() => {
      initOption();
    });

    return {
      data
    };
  }
};
</script>

<style scoped></style>
